<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>批改试卷</title>
<link href="../../css/teachersty.css" th:href="@{/css/teachersty.css}" rel="stylesheet">
<link href="../../css/scanExam.css" th:href="@{/css/scanExam.css}" rel="stylesheet">
<!-- 引入bootstrap样式 -->
<link href="../../css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<!-- jquery -->
<script src="../../js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../../js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<!-- bootstrap-table.min.js -->
<script src="../../js/bootstrap-table.min.js" th:src="@{/js/bootstrap-table.min.js}"></script>
<!-- 引入中文语言包 -->
<script src="../../js/bootstrap-table-zh-CN.min.js" th:src="@{/js/bootstrap-table-zh-CN.min.js}"></script>

<!-- li指针样式 -->
<style type="text/css">
	li{
		cursor: pointer;
		color:  #0066cc;
	}
</style>

<script type="text/javascript">
	//绘制表单
	$(function() {
		var staAnswers;	//标准答案
		var stuAnswers = [];	//学生答案
		var saGoals = [-1,-1,-1];
		var tid = $("#uid",parent.document).val();
		var cid = $("#courseid",parent.document).text();
		var sid;
		var examName;
		function getSingleRecord(row){
			$("ol li").removeClass("active");
			var name = "单挑数据"
			var guidEle = $('<li class="active deleteLi">' + name + '</li>');
			$(".breadcrumb").append(guidEle);
			$(".card").html($("#replacediv").html());
			$("#subDiv").show();
			sid = row.sid;
			examName = row.examName;
			$("#stuName").text(row.sname);
			$("#stuNum").text(sid);
			$.ajax({
				url : "searchSingleExam", // 请求目标
				type : "GET", // 请求类型 POST(加密) 或者 GET(默认)
				data : {sid : row.sid, examName : row.examName},
				dataType : 'json',
				async : true, // true代表异步 是默认的 false代表同步(浏览器一般不支持同步)
				cache : false, // true代表缓存,缓存后再次加载会快很多 false代表不缓存 
				success : function(data) {
					var totalGoal = data.totalGoal;
					var singleGoal = data.singleGoal;
					var sa = data.saInfo;
					stuAnswers[0] = sa.a1;
					stuAnswers[1] = sa.a2;
					stuAnswers[2] = sa.a3;
					staAnswers = data.standardAnswers;
					$("#totalGoal").text(totalGoal);
					$("#singleGoal").text(singleGoal);
					$("#standAnswer").text(staAnswers[0]);
					$("#studentAnswer").text(stuAnswers[0]);
					
					//绑定上一题下一题事件
					//下一题点击事件
					$("#nextT").on("click",function(){
						var currentT = parseInt($("#currentT").val());
						if(currentT == staAnswers.length){
							return false;
						}
						
						//记录题目号
						currentT = currentT+1;
						$("#currentT").val(currentT);
						
						//改变分页状态
						checkClick(currentT,staAnswers.length);
						
						//加载下一题数据
						$("#standAnswer").text(staAnswers[currentT-1]);
						$("#studentAnswer").text(stuAnswers[currentT-1]);
						if(saGoals[currentT-1] == -1){
							$("#scoreInput").val("");
						}else{
							$("#scoreInput").val(saGoals[currentT-1]);
						}
					});
					
					//上一题点击事件
					$("#preT").click(function(){
						var currentT = parseInt($("#currentT").val());
						if(currentT == 1){
							return false;
						}
						
						//改变分页状态
						currentT = currentT-1;
						$("#currentT").val(currentT);
						checkClick(currentT,staAnswers.length);
						
						//加载上一题数据
						$("#standAnswer").text(staAnswers[currentT-1]);
						$("#studentAnswer").text(stuAnswers[currentT-1]);
						if(saGoals[currentT-1] == -1){
							$("#scoreInput").val("");
						}else{
							$("#scoreInput").val(saGoals[currentT-1]);
						}
					});
					
					//分数编辑框监听变化
					$("#scoreInput").blur(function(){
						var flag = true;
						var sagoal = 0;
						var reg = /^[0-9]*$/;
						if(!reg.test($(this).val())){
							alert("只能输入数字");
							$(this).val("");
							return false;
						}
						if(parseInt($(this).val()) < 0 || parseInt($(this).val()) > 20){
							alert("单个简答题最高20分，最低0分");
							$(this).val("");
							return false;
						}
						var currentT = parseInt($("#currentT").val());
						saGoals[currentT-1] = $("#scoreInput").val();
						for(var i = 0; i < saGoals.length; i++){
							if(saGoals[i] != -1){
								sagoal += parseInt(saGoals[i]);
							}
						}
						totalGoal = parseInt(singleGoal)+parseInt(sagoal);
						$("#shortAnswerGoal").text(parseInt(sagoal));
						$("#totalGoal").text(parseInt(totalGoal));
						
					});
					
				}
			});
		}	
	
		function getExamRecords() {
			$("#subDiv").hide();
			$("#table").bootstrapTable('destroy');
			$("#table").bootstrapTable({ // 对应table标签的id
				url : "getStuExamRecord", // 获取表格数据的url
				cache : false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
				striped : true, //表格显示条纹，默认为false
				pagination : true, // 在表格底部显示分页组件，默认false
				pageList : [ 1, 2 ], // 设置页面可以显示的数据条数
				pageSize : 1, // 页面数据条数
				pageNumber : 1, // 首页页码
				sidePagination : 'server', // 设置为服务器端分页
				queryParams : function(params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求

					return {
						pageSize : params.limit, // 每页要显示的数据条数
						offset : params.offset, // 每页显示数据的开始行号
						sort : params.sort, // 要排序的字段
						sortOrder : params.order, // 排序规则
						tid : tid,
						cid : cid,
					}
				},
				sortName : 'sid', // 要排序的字段
				sortOrder : 'desc', // 排序规则
				columns : [
					{
						field : 'sid', // 返回json数据中的name
						title : '学号', // 表格表头显示文字
						align : 'center', // 左右居中
						valign : 'middle' // 上下居中
					}, {
						field : 'sname',
						title : '姓名',
						align : 'center',
						valign : 'middle'
					}, {
						field : 'examName',
						title : '试卷名称',
						align : 'center',
						valign : 'middle'
					},{
						field : 'time',
						title : '考试时间',
						align : 'center',
						valign : 'middle'
					},{
						title : "操作",
						align : 'center',
						valign : 'middle',
						width : 160, // 定义列的宽度，单位为像素px
						formatter : function(value, row, index) {
							var option;
							if(row.time == null){
								option = '<span>未考试</span>';
							}else if(row.goal == 0){
								option = '<a href="javascript:void(0)"  class="msub">批改</a>';
							}else{
								option = '<span>已批改</span>';
							}
							return option;//批改或查看
						},
						events: operateEvents = {"click .msub":function(e,value,row,index){
					              		getSingleRecord(row);
					         }
					    }  
					}
				],
				onLoadSuccess : function() { //加载成功时执行
					console.info("加载成功");
				},
				onLoadError : function() { //加载失败时执行
					console.info("加载数据失败");
				}
			})
		}


		//作业记录点击事件
		$("#record").on('click', function() {
			$(this).addClass('active');
			$(".deleteLi").remove();
			
			var tableHtml = '<table id="table"></table>';
			$(".card").html(tableHtml);
			getExamRecords();
		});
		
		//按钮禁用事件
		function checkClick(nowT,totalT){
			if(nowT == 1){
				$("#preLi").attr("class","disabled");
			}else if(nowT == totalT){
				$("#nextLi").attr("class","disabled");
			}else{
				$("#preLi").attr("class","able");
				$("#nextLi").attr("class","able");
			}
		}
		

		$('#submitStuExam').click(function(){
			var reg = /^[0-9]*$/;
			var totalGoal = parseInt($("#totalGoal").text());
			var singleGoal = parseInt($("#singleGoal").text());
			var shortGoal = 0;
			var flag = true;
			for(var i = 0; i < saGoals.length; i++){
				
				if(saGoals[i] == -1){
					flag = false;
					alert("您的题目未修改完");
					return false;
				}
				shortGoal += parseInt(saGoals[i]);
			}
			
			totalGoal = shortGoal + singleGoal;
			if(flag){
				$.ajax({
					url : "updateSAandTotalGoal", // 请求目标
					type : "GET", // 请求类型 POST(加密) 或者 GET(默认)
					data : {sid : sid, examName : examName, tid : tid, cid : cid, shortGoal : shortGoal, totalGoal : totalGoal},
					dataType : 'text',
					async : true, // true代表异步 是默认的 false代表同步(浏览器一般不支持同步)
					cache : false, // true代表缓存,缓存后再次加载会快很多 false代表不缓存 
					success : function(data) {
						alert(data);
						$("#record").click();
					}
				});
			}
			
			
		});

		//初始化表单
		getExamRecords();

	});
</script>

</head>
<body>
	<!-- 测试增加导航条 -->
	<!-- 
	<div style="padding-top: 8px;padding-right: 15px;float: right;">
		<button class="btn btn-info btn-sm" id="test">增加导航条</button>
	</div>	
	-->
	<div style="padding-top: 8px;padding-right: 15px;float: right;" id="subDiv">
		<button class="btn btn-info btn-sm" id="submitStuExam">提交修改</button>
	</div>
	<div class="cmtitle">批改试卷</div>
	<div class="cmline"></div>
	
	<!-- 面包屑导航条 -->
	<ol class="breadcrumb" style="margin-bottom: 0px; padding: 1px 15px;">
		<li id="record" class="active">试卷列表</li>
	</ol>
	
	<div class="card" style="margin-top: 0px;">
		<table id="table">
		</table>
	</div><!-- card结束 -->
	
	<!-- div容器 -->
	<div id="replacediv" style="display: none;">
		<!-- 单选题 -->
		<div class="scoreTop">
			<div class="studentInfor">
				<p>学生信息</p>
				<span>姓名：</span><span id="stuName">boommchacha</span><br> 
				<span>学号：</span><span id="stuNum">2016222222</span><br> 
			</div>
			<div class="scorePart">
				<div class="singleScore">
					<h5>单选得分</h5>
					<span id="singleGoal">99</span>
				</div>
			</div>
			<div class="scorePart">
				<div class="singleScore">
					<h5>简答得分</h5>
					<span id="shortAnswerGoal">0</span>
				</div>
			</div>
			<div class="scorePart">
				<div class="singleScore">
					<h5>总得分</h5>
					<span id="totalGoal">78</span>
				</div>
			</div>
			
		</div><!-- 单选题结束 -->
		
		<!-- 简答题 -->
		<div id="shortQuestion">
			<h5>简答题</h5>
			<div class="eachQuestion">
				<div class="standardDiv"><span>标准答案：</span><span id="standAnswer"></span></div>
				<div style="height: 10px;"></div>
				<div class="stuDiv"><span>学生答案：</span><span id="studentAnswer"></span></div>
				<input type="text" class="msaGoal scoreDiv" placeholder="请输入本题得分" id="scoreInput" onblur="scoreBlur(this)">
				<!-- 
				<div id="controlButton">
					<input type="button" id="lastQues" value="上一题" class="untouchable" onclick="lastQuesButton();">
					<input type="button" id="nextQues" value="下一题" class="touchable" onclick="nextQuesButton();">
				</div>
				 -->
				<nav>
					<ul class="pager">
						<li id="preLi" class="disabled"><a href="javascript:void(0);" id="preT">上一题</a></li>
						<li id="nextLi"><a href="javascript:void(0);" id="nextT">下一题</a></li>
					</ul>
					<input id="currentT" value="1" style="display: none;"/>
				</nav>
			</div>

		</div>	<!-- 简答题结束 -->
	</div><!-- div容器结束 -->

</body>
</html>